آشنایی با گرافیک وب - ۳ | فرمت‌های مختلف عکس

قالب‌هایی برای هر وضعیت

تصاویر گرافیکی کامپیوتری چه برای گربه من باشند و چه برای هر منظور دیگر، به دو شکل عمده تقسیم می‌شوند:

عکس‌های مبتنی بر نقشه نقطه‌ای (bitmap) و تصاویر مبتنی بر محاسبات کامپیوتری (vector).
تصاویر Bitmsp (یا raster) به شکل مجموعه‌ای از نقاط موسوم به پیکسل ذخیره می‌شوند.

هر پیکسل یک رنگ مخصوص به خود را در عکس دارد و وقتی آنها در کنار هم دیده می‌شوند یک عکس را تشکیل می‌دهند. تصاویر bitmap را می‌توان با پاک کردن یا تغییر دادن رنگ هر نقطه ویرایش نمود. قالب‌های مختلفی برای تصاویر bitmap وجود دارند که از آن جمله‌اند: TIFF برای چاپ، PSD و BMP محصول نرم‌افزار فتوشاپ، و بالاخره GIF، JPG و PNG برای اینترنت.

 بر تصاویر vector بر خلاف تصاویر bitmap متشکل از نقاط نیستند، بلکه به جای آنها از فرمول‌های ریاضی برای ایجاد خطوط و منحنی‌ها استفاده کرده و شکل را درست می‌کنند. تصاویر vector برای تصویرسازی، تصاویر خطی، و متن ایده‌آل هستند. البته، به استثناء قالب Macromedia Flash و Macromedia Shockwave اکثر مرورگرها تصاویر vector را پشتیبانی نمی‌کنند.

در نتیجه، این گونه عکس‌ها باید پیش از نمایش در اینترنت به bitmap  تبدیل شوند (rasterised ) . برخی از قالب‌های vector  عبارتند از: EPS، AI و WMF برای illustrator محصول adobe و PICT برای Mac .

هدیه GIF

Gif (سرنام عبارت Graphic Internet Format) متداول‌ترین قالب تصویری در اینترنت می‌باشد. فشرده‌سازی gif از نوع ۸ بیتی است و دارای ۲۵۶ رنگ می‌باشد. قاعده کلی این است که تصاویر gif در محیط‌های دارای رنگ‌های تخت و یکپارچه مانند تصویرسازی‌ها و لوگوها مناسب‌ترند. از جمله مزایای دیگر قالب gif آن است که به شما اکان می‌دهد تا جلوه‌هایی نظیر شفافیت (transparency) ، و انیمیشن ایجاد کنید.

شما می‌توانید در یک تصویر gif شفاف یک رنگ را شفاف کنید (معمولاً پس زمینه).  تمام تصاویر گرافیکی انیترنت چهارگوش هستند و شفاف‌سازی راهی است که از طریق آن می‌توانید تصویر را از شکل چهارگوش خارج نمایید. تصاویر در هم بافته نمایی ابتدایی از تمام تصویر را ارائه می‌کنند و سپس تصویر رفته‌رفته وضوح پیدا می‌کند و جزئیات آن بیشتر دیده می‌شود.

این امر به بیننده امکان می‌دهد تا پیش از  دانلود شدن کامل عکس نمایی کلی از آن به دست آورد (هدیه الهی برای کسانی که سرعت اینترنت آنها کم است). فایل‌های gif دارای انیمنیشن شامل چندین تصویر هستند و مانند یک نمایش اسلاید عمل می‌کنند. این نوع فایل‌ها در تمام مرورگرهای اینترنت نمایش داده می‌شوند و نیاز به نصب هیچ plug – in اضافی نمی‌باشد.

گزینه‌های JPEG/JPG

قالب JPEG (سرنام عبارت Joint Photographic Experts Group) مخصوص تصاویری با کیفیت عکس‌های چاپی طراحی شده است. فشرده‌سازی JPEG ۲۴ بیتی می‌باشد و بدان معنی است که ۱۶/۷ میلیون رنگ دارد. در نتیجه JPEG قالبی مناسب برای ثبت عکس، طراحی، و هر گونه تصویر پیچیده یا دارای حرکت یکنواخت رنگی از یک رنگ به رنگ دیگر می‌باشد.

یک فایل استاندارد JPEG برخلاف قالب gif، در هم بافته نیست که البته این مشکل توسط قالب JPEG پیشرفته اصلاح شده است. البته نسخه‌های قدیمی‌تر برخی از مرورگرها نمی‌توانند تصاویر با این قالب جدید (JPEG پیشرفته) را نمایش دهند.

PNG

PNG (سرنام عبارت Portable network Graphic) عموماً قالب‌بندی آینده تلقی می‌شود. فشرده‌سازی PNG از نوع ۸ بیتی، ۲۴ بیتی، یا ۳۲ بیتی است و بدین ترتیب قالبی ایده‌آل برای هر نوع تصویر گرافیکی به شمار می‌رود. البته، بسیاری از مرورگرهای قدیمی مانند ۴IE  و Netscape۴ یا قدیمی‌تر این قالب‌بندی را پشتیبانی نمی‌کنند وب رخی از مرورگرهای جدید هنوز مشکلات زیادی با آن دارند. برخلاف بسیاری از شک‌انگیزهای درباره PNG، هنوز آینده روشنی برای قالب PNG بدون گواهی احساس می‌شود.

حال که اطلاعاتی ساده درباره قالب‌های تصاویر اینترنتی به دست آوردید، مهیای صادر کردن تصاویر به اینترنت هستید.

خروجی گرفتن ازتصاویر

حال که تصاویر شما ویرایش و اصلاح شده‌اند، زمان آماده‌سازی آن برای دیده شدن در اینترنت فرا رسیده است.  خروجی گرفتن یک تصویر مراحل بهینه‌سازی، شفاف‌سازی gif ها، و تکه تکه کردن تصاویر را شامل می‌شود.

بهینه‌سازی یک فایل تصویر گرافیکی مستلزم دقت زیاد است. بین کاستن حجم فایل برای سرعت بخشیدن به دانلود آن وحفظ یکپارچگی تصویر فاصله بسیار کمی وجود دارد. بسیاری از برنامه‌های مهم ویرایش تصویر مانند Firework و Image ready دارای نوار ابزار شامل امکانات بهینه‌سازی فایل با قابلیت مرور اولیه هستند. از این نوار ابزار یک قالب فایل را انتخاب نمایید. بسته به نوع تصویر، قالب تصویر شما معمولاً یا GIF و یا JPEG خواهد بود.

برای تصاویر gif رنگ‌های مختلف پالت رنگی (رنگ‌های سازگار، ۲۱۶ رنگ اینترنتی، رنگ‌های دقیق، ...) را امتحان کنید تا بهترین رنگ مناسب برای تصویرتان را پیدا نمایید. پس از انتخاب پالت مورد نظر، گام‌بعدی کاستن تعداد رنگ تا اندازه‌ای که کیفیت عکس تخریب نشود، می‌باشد.

پس از کاستن از تعداد رنگ‌ها، ممکن است دلتان بخواهد dithering را نیز امتحان کنید. Dithering فرایندی است که طی آن رنگ‌های فاقد پشتیبانی یا از قلم افتاده از طریق ترکیب رنگ‌های مختلف موجود در پالت انتخاب شده، شبیه‌سازی می‌شوند.

گاهی در نتیجه این فرایند تصویر. بسته به نوع تصویر، اندکی دانه دانه شده و شفافیت آن کم می‌شود. در صورت استفاده گسترده از dithering، پالت رنگ‌های سازگاری بهترین نتیجه را در بر دارد.

در هنگام صادر کردن gif های شفاف، پس از بهینه‌سازی، رنگ‌های شفاف (معمولاً رنگ‌های پس زمینه) را انتخاب نمایید. در این صورت ممکن است در اطراف تصویر شما خطوط یا هاله ناخواسته‌ای ایجاد شود. تنظیم رنگ‌های مات متناسب با پس زمینه می‌تواند این حالت را از بین ببرد. در نتیجه این تنظیمات پیکسل‌های اطراف تصویر با رنگ پس زمینه ادغام می‌شوند.

خروجی گرفتن از تصاویر با قالب‌بندی JPEG از این هم آسان‌تر است. مقدار فشرده‌سازی از ۱ تا ۱۰۰ سنجیده می‌شود. هر چه این مقدار کم باشد، فایل شما بیشتر فشرده می‌شود و در نتیجه کیفیت عکس کاهش می‌یابد. هر فایل JPEG میزان فشرده‌سازی خاص خود را دارد، اما اکثر آنها را می‌توان بین ۳۰ تا ۷۰ درصد فشرده کرد.

تصاویر بزرگی را که در اکثر صفحات اینترنتی دیده می‌شوند و فقط در هر صفحه اندکی تغییر می‌کنند، می‌توان تکه‌تکه کرد. بوسیله ابزار تکه‌تکه‌سازی عکس، بخش‌های ثابت تصویر در حافظه مرورگر ذخیره می‌شوند و در هنگام باز شدن صفحه بعدی از آن حافظه استفاده می‌گردد. فقط بخش‌های کوچکتری که در هر صفحه تغییر می‌کنند دانلود می‌شوند و در نتیجه سرعت دانلود کل صفحه به اندازه قابل توجهی افزایش می‌یابد. گاهی اوقات تکه‌تکه کردن تصویر در طراحی HTML های پیچیده ضروری است.

حال شما فوت و فن وارد کردن، ایجاد و ویرایش و نیز صادر کردن تصاویر بی‌عیب و نقص اینترنتی را یاد گرفتید. البته، تصویر ثابت همیشه کافی به نظر نمی‌رسد. در این موقع، rollover های گرافیکی و gif های انیمیشن‌دار می‌توانند صفحات اینترنتی شما را زنده‌تر جلوه دهند.